let img = document.querySelector('.mainTop-left')
let second = document.querySelector('.mainTop-right')
let fu = document.querySelector('.first-ul')
let btn = document.querySelector('.btn')
let sw = document.querySelector('.show')
let el=document.querySelector('.enlarge');

// console.log(el);

let info ={
    sspuId: '10007209',
    typeId: '1',
    skuId: '122817',
    t: '1648778885398',
}

a()
console.log(1);
async function a(){
    let res = await pAjax({
        url:'/vivo',
        dataType:'json',
        method:'POST',
        data:info
    })


    console.log(res);
    console.log(res.data.dataList[4]);



    let shouji =`
    <div class="show"></div>`
    // res.data.forEach(function(item){
        shouji +=`
        <img src="${res.data.dataList[4].images[0].bigPic}" alt="">
        
        `
    // })
    img.innerHTML = shouji
    sw.innerHTML=`<img src="${res.data.dataList[4].images[0].bigPic}" alt="">
    <div class="mask"></div>
    `

    el.innerHTML=`<img src="${res.data.dataList[4].images[0].bigPic}" alt="">`


    let shuju =`
    <div class="mainTop-right"></div>`

        shuju +=`
        
                    <div class="rightTop">新款</div>
                    <h1>${res.data.dataList[4].skuName}</h1>
                    <div class="rightMain">${res.data.dataList[4].promotion}
                    </div>
                    <div class="rightMain" style="margin-top: 15px;">
                        ${res.data.dataList[4].brief}
                    </div>
                    <div class="rightMain" style="margin-top: 10px;">
                        <span>
                            ${res.data.dataList[4].discountPrice}
                        </span>
                    </div>

                    <div class="rightMain-o">
                        <p>选择机型</p>
                        <div>
                            
                        </div>
                        <div>
                            
                        </div>
                    </div>

                    <div class="rightMain-t">
                        <p>选择机型</p>
                        <div>
                            <ul>
                                <li>
                                    <img src="../image/01.jpg" alt="">
                                    <p>绿色</p>
                                </li>
                                <li>
                                    <img src="../image/02.jpg" alt="">
                                    <p>银色</p>
                                </li>
                                <li>
                                    <img src="../image/03.jpg" alt="">
                                    <p style="left:20%">远峰蓝</p>
                                </li>
                                <li>
                                    <img src="../image/04.jpg" alt="">
                                    <p>石墨</p>
                                </li>
                            </ul>
                        <div>                        
                    </div>
        
        `
    second.innerHTML = shuju

    class Fangdajing{
        ele;
        constructor(option){
            //获取属性
            this.ele = document.querySelector(option)
            this.show = this.ele.querySelector('.show')
            this.mask = this.ele.querySelector('.mask')
            this.list = this.ele.querySelector('.list')
            this.enlarge = this.ele.querySelector('.enlarge')
            // this.picture = this.enlarge.firstElementChild;
            this.picture = this.enlarge.querySelector('img')
            // this.picture=document.querySelector('.enlarge')
            console.log(this.enlarge)
            console.log(this.picture)
    
            //获取show盒子的属性
            this.show_w = this.show.clientWidth
            this.show_h = this.show.clientHeight
    
            //获取mask盒子的属性
            this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
            this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
    
            //获取enlarge盒子中图片的属性
            this.picture_w = parseInt(window.getComputedStyle(this.picture).width)
            this.picture_h = parseInt(window.getComputedStyle(this.picture).height)
    
    
            this.setSizeInd()
            this.overOutInd()
            this.clickChangeInd()
            this.moveInd()
    
        }
        setSizeInd(){
        
            let enlarge_w = this.mask_w * this.picture_w / this.show_w
            let enlarge_h = this.mask_h * this.picture_h / this.show_h
    
            this.enlarge.style.width = enlarge_w + 'px'
            this.enlarge.style.height = enlarge_h + 'px'
        }
    
        overOutInd(){
            this.show.addEventListener('mouseover',() =>{
                this.mask.style.display = 'block'
                this.enlarge.style.display = 'block'
                console.log('1111');
            })
            this.show.addEventListener('mouseout',() =>{
                this.mask.style.display = 'none'
                this.enlarge.style.display = 'none'
            })
        }
    
    
        clickChangeInd(){
            this.list.addEventListener('click',e => {
                console.log(111);
                e = e || window.event
                let target = e.target || e.srcElement
                for(let s = 0; s < this.list.children.length; s++){
                    this.list.children[s].classList.remove('active')
                }
                target.classList.add('active')
    
                let showSrc = target.dataset.show
                let bgSrc = target.dataset.bg
    
                this.show.firstElementChild.src = showSrc
                this.picture.src = bgSrc
            })
        }
    
        moveInd(){
            this.show.addEventListener('mousemove',e =>{
                
                e = e || window.event
                let x = e.offsetX - this.mask_w / 2
                let y = e.offsetY - this.mask_h / 2
    
    
                if(x < 0)x = 0
                if(y < 0)y = 0
    
                if(x >= this.show_w - this.mask_w)x = this.show_w - this.mask_w
                if(y >= this.show_h - this.mask_h)y = this.show_h - this.mask_h
    
                this.mask.style.left = x + 'px'
                this.mask.style.top = y + 'px'
    
    
                let pictureLeft = x * this.mask_w * this.picture_w / this.show_w / this.mask_w
                let pictureTop = y * this.mask_h * this.picture_h / this.show_h / this.mask_h
    
                // console.log(pictureLeft);
                this.picture.style.left = -pictureLeft + 'px'
                this.picture.style.top = -pictureTop + 'px'
            })
        }
    
    
    
    
    }

    let i = new Fangdajing('#box')
}
